<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="${httpServletRequest.getContextPath()}/css/layui.css"  media="all">
  <title></title> 
  <script src="${httpServletRequest.getContextPath()}/jquery.min.js"></script>
  <script src="${httpServletRequest.getContextPath()}/layer.js"></script>
  <script src="${httpServletRequest.getContextPath()}/layui.js"></script>
  <style> 
.main{
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
} 
</style> 
</head>
<body>
   <form class="layui-form" action="${httpServletRequest.getContextPath()}/user/chat" method="POST">
  <div class="main">
  <div class="layui-form-item">
    <label class="layui-form-label">昵称:</label>
    <div class="layui-input-block">
      <input type="text" name="userName" lay-verify="title" autocomplete="off" placeholder="请输入昵称" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">编码</label>
    <div class="layui-input-block">
      <input type="text" name="userCode" lay-verify="userCode" placeholder="请输入代号" autocomplete="off" class="layui-input">
    </div>
  </div>
   <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
  </div>
  </form>
  
  <script>
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
 
  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 2){
        return '代号至少需要两个字符';
      }
    }
    ,userCode: [/^[0-9A-Za-z]+$/, '字母和数字']
  });
  
  //监听提交
  form.on('submit(demo1)', function(data){
    /*layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })*/
    return true;
  });
  
  
  var errorMsg="${errorMsg}";
  if(null != errorMsg && ""!=errorMsg){
	  layer.alert(errorMsg), {
      title: '错误提示'
    }
  }
});
</script>
</body>
</html>